<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <input type="text" name="" id="inp1" value="">
    <input type="text" name="" id="inp2" value="">
    <script>
        'use strict';
        /**
            属性
                首先我们要搞清楚属性的概念，属性是存储在特定命名位置的值，是对象的内容，属性并不直接存储在对象容器内部。
                属性有两种类型:
                    数据属性和访问器属性。
                        属性具备了属性描述符，用来描述属性拥有的特性。
            属性描述符
                属性描述符用来描述属性特性的(只有在内部才能用的特性),配置属性是否可读，是否可写，是否可枚举，值是多少，读写。
            属性描述符对象
                Object.definePrOperty(obj,'a',{value:2,writable:true,configurable:true})
                    第三个参数就是属性描述符对象 ，首先它是个对象，它有自己的属性，其次它是属性a的属性描述符，用来配置属性。
                        定义这些特性为了实现JavaScript引擎用的，因此再JavaScript中不能直接访问它们。
                        为了表示特征是内部值，ES规范把它们放在了两对方括号中，例如[[Enumerable]]。
                        访问器属性不能直接定义，必须使用Object.defineProperty()来定义。
            数据属性
                数据属性包含一个数据值的位置。
                在这个位置可以读取和写入值。
                共有四个描述其行为的特征:
                    [[Configurable]]：配置，表示能否删除修改属性的特性，或者把属性修改为访问器属性,默认true
                    [[Enumerable]]：枚举，表示能否通过for-in循环返回属性,默认true
                    [[Writable]]：可写，表示能否修改属性值,默认true
                    [[Value]]：属性的数据值。读写属性值从该位置。默认undefined
            访问器属性
                访问器属性不包含数据值；它们包含一对getter和setter函数。
                共有四个描述其行为的特征:
                    [[Configurable]]：配置，表示能否删除修改属性的特性，或者把属性修改为访问器属性,默认true
                    [[Enumerable]]：枚举，表示能否通过for-in循环返回属性,默认true
                    [[Get]]：在读取属性值时调用的函数,默认undefined
                    [[Set]]：在写入属性值时调用的函数,默认undefined
                    当个一个属性定义getter、setter或者两者都有时，这个属性就成了访问器属性
        */
        var test = {
            _name: '',
            get name() {
                return this._name
            },
            set name(name) {
                return this._name = name
            }
        }

        test.name = 'pangcy';
        console.log(test.name);
        document.getElementById('inp1').value = test.name;
        document.getElementById('inp2').value = test.name;

        var person = function() {
            var _name = '';
            var obj = [];
            Object.defineProperty(obj, 'name', {
                configurable: true,
                enumerable: true,
                get: function() {
                    return _name;
                },
                set: function(n) {
                    _name = n
                }
            })
            return obj;
        }();

        person.name = "zhang";
        console.log(person.name)
    </script>
</body>

</html>